<template>
  <div class="pagination">
    <ul class="pagination-btns">
      <!-- 向左 -->
      <li @click="dec" :class="{ disabled: myCurrentPage <= 1 }">
        <div class="iconfont icon-115fangxiang_xiangzuo"></div>
      </li>
      <!-- 第一页 -->
      <li :class="{ active: myCurrentPage === 1 }" @click="myCurrentPage = 1">
        1
      </li>
      <!-- 省略 -->
      <li v-if="myCurrentPage > 2" class="iconfont icon-ellipsis"></li>
      <!-- 中间按钮 -->
      <li
        v-for="(number, index) in startEnd.end - startEnd.start + 1"
        :key="number"
        :class="{ active: myCurrentPage === startEnd.start + index }"
        @click="myCurrentPage = startEnd.start + index"
      >
        {{ startEnd.start + index }}
      </li>
      <!-- 省略 -->
      <li
        v-if="myCurrentPage < totalPage - 1"
        class="iconfont icon-ellipsis"
      ></li>
      <!-- 最后一页 -->
      <li
        :class="{ active: myCurrentPage === totalPage }"
        @click="myCurrentPage = totalPage"
        v-if="totalPage > 1"
      >
        {{ totalPage }}
      </li>
      <!-- 向右 -->
      <li @click="add" :class="{ disabled: myCurrentPage >= totalPage }">
        <div class="iconfont icon-113fangxiang_xiangyou"></div>
      </li>
    </ul>
    <select class="pagination-select" v-model="myPageSize">
      <option :value="5">每页 5 条</option>
      <option :value="10">每页 10 条</option>
      <option :value="15">每页 15 条</option>
      <option :value="20">每页 20 条</option>
    </select>
    <span>共 {{ total }} 条</span>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    currentPage: {
      type: Number,
      default: 5,
    },
    pageSize: {
      type: Number,
      default: 10,
    },
    total: {
      type: Number,
      default: 0,
    },
  },
  data() {
    // 需要对pagesize和total进行加减操作,所以需要重新定义,不可对props的数据操作
    return {
      // 每页的最大值
      myPageSize: this.pageSize,
      // 当前页
      myCurrentPage: this.currentPage,
      isEmit: false,
    }
  },
  computed: {
    // 计算总页数
    totalPage() {
      return Math.ceil(this.total / this.myPageSize)
    },
    // 计算中间按钮的start和end数
    /*场景:
     场景一: '1' ... 3 4 [5] 6 7 ... '10'
     场景二: '1' [2] 3 4 5 6 ... '10'
     场景三: '1' ... 5 6 7 8 [9] '10'
     场景四: '1' [2] 3 4 5 6 '7'
     场景五: [1] 或1 2
      */
    startEnd() {
      // 会使用到当前页和总页数,先解构
      const { totalPage, myCurrentPage } = this
      // 场景五:当只有一页时,随便定义start和end,让他们相减后+1的值为至少为0即可
      if (totalPage <= 1) {
        return {
          start: 2,
          end: 1,
        }
      }
      // 场景四:当totalPage<=7时,start要单独定义
      if (totalPage <= 7) {
        return {
          start: 2,
          end: totalPage - 1,
        }
      }

      // 场景一:
      let start = myCurrentPage - 2
      // 场景二:start的最小值为2,所以对start进行判断
      if (start < 2) start = 2
      // 场景三:end的最大值为totalPage-1,所以要对end进行判断,然后通过end的值,确定start的值
      let end = start + 4
      if (end > totalPage) {
        end = totalPage - 1
        start = end - 4
      }
      return {
        start,
        end,
      }
    },
  },
  watch: {
    //监控最大页数,与当前页数的关系
    // 设置开关的目的是,改变显示条数的时候,导致当前页码变化时,单独监控的当前页码不会因为跟着变化而再次发送请求,因为当前页已经和显示条数一起传过去了
    myPageSize(myPageSize) {
      const { totalPage, myCurrentPage } = this
      if (myCurrentPage > totalPage) {
        this.myCurrentPage = totalPage
        this.isEmit = true
      }
      this.$emit('changePageSize', myPageSize, this.myCurrentPage)
    },
    myCurrentPage(myCurrentPage) {
      if (this.isEmit) {
        this.isEmit = false
        return
      }
      this.$emit('changeCurrentPage', myCurrentPage)
    },
  },
  methods: {
    // 向右箭头的点击事件++
    add() {
      if (this.myCurrentPage >= this.totalPage) return
      this.myCurrentPage++
    },
    // 向左箭头的点击事件--
    dec() {
      if (this.myCurrentPage <= 1) return
      this.myCurrentPage--
    },
  },
}
</script>

<style lang="less" scoped>
.pagination {
  display: flex;
  .pagination-btns {
    display: flex;
    li {
      height: 30px;
      line-height: 30px;
      width: 30px;
      margin-right: 10px;
      border-radius: 2px;
      background-color: #f4f4f5;
      font-size: 14px;
      text-align: center;
    }
    .active {
      background-color: #409eff !important;
      color: #fff;
    }
    .disabled {
      cursor: not-allowed;
      color: #c0c4cc;
    }
  }
  .pagination-select {
    outline: none;
  }
  span {
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
  }
}
</style>
